<template>
  <van-dialog
    v-model:show="dialogShow"
    :title="dialogTitle"
    :width="dialogWidth"
    :showConfirmButton="showConfirmButton"
    :showCancelButton="showCancelButton"
    :confirmButtonText="confirmButtonText"
    :confirmButtonColor="confirmButtonColor"
    cancelButtonText="取消"
    :cancelButtonColor="cancelButtonColor"
    :closeOnClickOverlay="closeOnClickOverlay"
    @confirm="confirm"
    @cancel="cancel"
    @open="open"
  >
    <div class="dialogContent">
      <slot></slot>
    </div>
  </van-dialog>
</template>

<script setup>
import { ref, reactive, watch, computed } from 'vue'

const emit = defineEmits([
  'update:value',
  'sureDialog',
  'cancelDialog',
  'openDialog'
])
const props = defineProps({
  // 控制弹窗显示
  value: {
    type: Boolean,
    require: true
  },
  // 弹窗标题
  dialogTitle: {
    default: '提示',
    require: false
  },
  // 弹窗宽度
  dialogWidth: {
    default: '320px',
    require: false
  },
  // 是否显示确认按钮
  showConfirmButton: {
    default: true,
    require: false,
    type: Boolean
  },
  // 是否显示取消按钮
  showCancelButton: {
    default: true,
    require: false,
    type: Boolean
  },
  // 确认按钮颜色
  confirmButtonColor: {
    default: '#ee0a24',
    require: false,
    type: String
  },
  // 取消按钮颜色
  cancelButtonColor: {
    default: 'black',
    require: false,
    type: String
  },
  // 点击遮罩层是否关闭弹窗
  closeOnClickOverlay: {
    default: false,
    require: false,
    type: Boolean
  },
  confirmButtonText:{
    default: '确认',
    require: false,
    type: String
  }
})

const dialogShow = computed({
  get() {
    return props.value
  },
  set(val) {
    emit('update:value', val)
  }
})

const confirm = () => {
  emit('sureDialog')
}
const cancel = () => {
  emit('cancelDialog')
  emit('update:value', false)
}
const open = () => {
  emit('openDialog')
}
</script>
<style lang="scss" scoped>
.dialogContent {
  padding: 10px;
  // text-align: left;
  max-height: 900px;
  overflow-y: auto;
}
:deep(.van-dialog) {
  border-radius: 12px;
}
.dialogContent {
  color: #323233;
  font-size: 14px;
}
</style>
